<template>
  <div id="revenueAgency">
    <!-- 头部 -->
    <div class="hand">
      <c-title :hide="false" text="代理收益管理"></c-title>
      <div class="userinfo">
        <div>
          <img :src="avatar_image"></img>
        </div>
        <div style="margin-left: 7px;">
          <div class="name ls1">
            {{username||'--'}}
          </div>
          <div class="grade" v-if="agentLevel">
            {{agentLevel}}
          </div>
        </div>
      </div>
    </div>
    <!-- 收益 -->
    <div class="earnings ls1">
      <div v-for="(item,index) in earnings" :key="index" class="list">
        <div class="price">¥{{item.price}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </div>
    <!-- 订单 -->
    <div class="order">
      <van-tabs v-model="activeName" title-active-color="#f15353" @click="clickChange">
        <div v-for="(item,index) in orderSelection" :key="index">
          <van-tab :title="item.title" :name="item.name">
          </van-tab>
        </div>
      </van-tabs>
      <van-collapse v-model="activeLabelName" accordion @change="getOrderList">
        <van-collapse-item :title="item.sub_month_str" :name="item.index" :value="'¥'+item.reward_amount_total"
          v-for="(item,index) in listOfTime" :key="index">
          <div>
            <div v-for="(item,index) in orderList" :key="index" :style="index == 0?'':'margin-top:15px'">
              <div style="display: flex; align-content: center; justify-content: space-between;">
                <div style="color: #353535;">
                  {{item.order_sn||'---'}}
                </div>
                <div style="color: #f15353;">
                  ¥{{item.reward_amount}}
                </div>
              </div>
              <div class="listValue">
                <div style="display: flex;">
                  <div>时间:</div>
                  <div style="margin-left: 6px;">{{item.reward_time}}</div>
                </div>
                <div>
                  {{item.settlement_status_text}}
                </div>
              </div>
            </div>
            <van-divider v-if="orderList.length == 0">{{'暂无数据'}}</van-divider>
            <van-divider v-if="orderLastPage&&orderList.length != 0">{{'暂无更多'}}</van-divider>
            <div class="more" v-show="pagingChoose.current_page<pagingChoose.last_page">
              <div @click="readMore(item.sub_month_str)">查看更多</div>
              <div class="iconfont icon-member-bottom"></div>
            </div>
          </div>
        </van-collapse-item>
        <van-divider v-if="listOfTime.length == 0">{{'暂无数据'}}</van-divider>
      </van-collapse>
    </div>
  </div>
</template>

<script>
  import index from "./index.js";
  export default index;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .ls1 {
    letter-spacing: 1px;
  }

  #revenueAgency {
    background-color: #f7f8fb;
    height: 100vh;

    .hand {
      background-color: #ff8924;

      .userinfo {
        margin-top: 20px;
        background-color: #ff8924;
        height: 100px;
        display: flex;
        padding-left: 15px;

        img {
          border-radius: 50px;
          width: 60px;
          height: 60px;
        }

        .name {
          color: white;
          margin-bottom: 13px;
          letter-spacing: 0;
          font-weight: bold !important;
          text-align: left;
          font-size: 16px;
        }

        .grade {
          background-color: white;
          border-radius: 30px;
          padding: 3px 10px 3px 12px;
          color: #ba750c;
          font-size: 12px;
          width: fit-content;
        }
      }
    }

    .earnings {
      background-color: white;
      border-radius: 5px;
      height: 70px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 18px 26px 18px 26px;
      margin: 10px;
      margin-top: -20px;

      .list {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .price {
          color: #f14e4e;
          font-weight: bold !important;
        }

        .name {
          color: #696969;
          font-size: 11px;
          font-weight: bold;
          margin-top: 5px;
        }
      }
    }

    .order {
      margin: 10px;
      background-color: white;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 20px;

      .listValue {
        display: flex;
        align-content: center;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 12px;
        color: #838383;
      }

      .more {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
      }
    }
  }

  ::v-deep .van-tabs__line {
    height: 2px;
    border-radius: 3px;
    bottom: 22px;
    width: 36px;
  }

  ::v-deep .van-cell__value {
    color: #f15353;
  }

  ::v-deep .van-cell {
    text-align: left;
  }

  ::v-deep .van-collapse-item__content {
    text-align: left;
  }

  ::v-deep .van-nav-bar {
    background-color: #ff8924;
    border: none;
  }

  ::v-deep .van-button--default {
    background-color: #ff8924;
  }

  ::v-deep .van-nav-bar__title {
    color: white;
    font-weight: 100;
    font-size: 18px;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: white;
    font-size: 19px;
  }

  ::v-deep .van-cell__right-icon {
    color: black;
  }

  ::v-deep .van-divider {
    font-size: 12px;
    margin-top: 7px;
    margin-bottom: 1px;
  }
</style>
